<template>
    <div class="take-photo-container">
        <div class="title">请上传您的小票图片</div>
        <div class="photo-wrapper" @click="takePhoto">
            <img class="photograph-icon" :src="imgPhoto">
        </div>
        <div class="btn-wrapper">
            <van-button class="btnClass" type="default" v-if="!showSubmitBtn" @click="takePhoto">点击拍照</van-button>
            <van-button class="btnClass" type="primary" v-if="showSubmitBtn" @click="uploadPhoto">提交</van-button>
        </div>
        <div class="history-wrapper" @click="goToView('/self_integral_records')">
            <span>查看积分记录</span>
        </div>
        <div class="line-wrapper">
            <span>特别声明</span>
        </div>
        <div class="info-wrapper">
            <div class="info">1、使用拍照积分，上传小票时，会因网络原因延迟，烦请耐心等待。</div>
            <div class="info">2、使用中有任何疑问，请致电0757-86562356咨询。</div>
            <div class="info">3、当天小票48小时内积分有效。</div>
            <div class="info">4、对于积分异常，在法律可范围内有权冻结该账户。</div>
            <div class="info">5、账户冻结之后需解冻，请至1楼客服中心（UR旁边）出示相关支付证明解冻。</div>
            <div class="info">6、同一时段同一餐饮只能积分一张（任意一张），恶意积分会取消积分资格。</div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import wx from 'weixin-js-sdk'
    import Cookies from 'js-cookie'
    import {Toast, Dialog, Button} from 'vant';
    import {isDev} from '@/utils/tools'

    Vue.use(Dialog);
    Vue.use(Toast);
    Vue.use(Button);
    export default {
        name: "TakePhoto",
        components: {},
        data() {
            return {
                token: '',
                preImg: '',
                localId: '',//原预览id
                serverId: ''
            }
        },
        mounted() {
            this.token = Cookies.get('token')
        },
        computed: {
            imgPhoto() {
                if (this.preImg.length <= 0) {
                    return "/images/photo2.jpg"
                } else {
                    return this.preImg
                }
            },
            showSubmitBtn() {
                let flag = (this.preImg&&this.preImg.length > 0) ? true : false
                return flag
            }
        },
        methods: {
            takePhoto() {
                let _this = this;
                wx.chooseImage({
                    count: 9, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        _this.localId = res.localIds[0];
                        if (window.__wxjs_is_wkwebview) {
                            wx.getLocalImgData({
                                localId: res.localIds[0], // 图片的localID
                                success: function (res) {
                                    _this.preImg = res.localData;// localData是图片的base64数据，可以用img标签显示
                                }
                            });
                        } else {
                            _this.preImg = res.localIds[0];
                        }
                    }
                });
            },

            uploadWxImage() {
                var _this = this
                wx.uploadImage({
                    localId: _this.localId, //图片在本地的id
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {//上传图片到微信成功的回调函数   会返回一个媒体对象  存储了图片在微信的id
                        _this.serverId = res.serverId
                        Toast.success('上传成功!')
                        _this.upLoadImageToServe()
                    },
                    fail: function (res) {
                        // console.log(res);
                        Toast.success('上传失败,稍后重试!');
                    }
                });
            },
            upLoadImageToServe() { //上传到本地数据库
                this.$api.integral.uploadImgToServe({openId: this.token, serverId: this.serverId}).then(res => {
                    this.preImg = ''
                }).catch(error => {
                    this.preImg = ''
                })
            },
            uploadPhoto() {
                let _this = this
                Dialog.confirm({
                    title: '提示',
                    message: '是否上传小票'
                }).then(() => {
                    _this.uploadWxImage()
                }).catch(() => {

                });
            },
            goToView(path) {
                this.$router.push(path)
            }
        }
    }
</script>

<style lang="less">
    @import "../../assets/less/base";

    .take-photo-container {
        min-height: 100%;
        background-color: @main-background-color;
        .title {
            height: 40px;
            line-height: 40px;
            margin: 20px 20px;
            text-align: center;
            background-color: @main-theme-color;
            color: #ffffff;
            .fz()
        }
        .photo-wrapper {
            height: 200px;
            width: 200px;
            margin: 0 auto;
            text-align: center;
            .photograph-icon {
                height: 200px;
                width: 200px;
            }
        }
        .btn-wrapper {
            width: 200px;
            margin: 0 auto;
            text-align: center;
            .btnClass {
                width: 200px;
                color: #ffffff;
                border: 1px solid @main-theme-color;
                background-color: @main-theme-color;
            }
        }
        .history-wrapper {
            height: 20px;
            line-height: 20px;
            text-align: center;
            margin-top: 10px;
            padding: 10px 0;
            span {
                display: inline-block;
                height: 20px;
                color: @front-font-color;
                .fw()
            }
        }
        .line-wrapper {
            margin: 40px 0;
            line-height: 1px;
            border-left: solid 100px @main-theme-color;
            border-right: solid 100px @main-theme-color;
            text-align: center;
            color: @front-font-color;
            .fz();
            .fw();
        }
        .info-wrapper {
            width: 100%;
            background-color: rgb(241, 245, 248);
            .info {
                padding: 0 10px;
                color: @front-font-color;
                &:last-child {
                    padding-bottom: 50px;
                }
            }
        }

    }
</style>
